<template>
    <div class="keywordLibraryContainer">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>测试执行</el-breadcrumb-item>
            <el-breadcrumb-item>关键字库</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-form :inline="true" :model="libraryQuery" class="queryForm">
                <el-form-item label="库名">
                    <el-input v-model="libraryQuery.libraryName" placeholder="请输入库名"></el-input>
                </el-form-item>
                <el-form-item label="类别">
                    <el-select v-model="libraryQuery.libraryType" placeholder="类别">
                        <el-option label="空" value=""></el-option>
                        <el-option label="系统库" value="系统库"></el-option>
                        <el-option label="自定义库" value="自定义库"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="功能">
                    <el-select v-model="libraryQuery.libraryFunction" placeholder="请选择功能">
                        <el-option label="空" value=""></el-option>
                        <el-option label="WebUI自动化" value="WebUI自动化"></el-option>
                        <el-option label="APPUI自动化" value="APPUI自动化"></el-option>
                        <el-option label="接口自动化" value="接口自动化"></el-option>
                        <el-option label="BuiltIn" value="BuiltIn"></el-option>
                        <el-option label="字符处理" value="字符处理"></el-option>
                        <el-option label="OS操作" value="OS操作"></el-option>
                        <el-option label="项目定制" value="项目定制"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button  @click="getLibraryList" type="info" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-button type="primary">新增</el-button>
        <el-card class="tableCard" :body-style="{height:'100%'}">
            <el-table
                        :header-cell-style="{background:'#666666',color:'#eeeeee'}"
                        :data="libraryList"
                        height="100%"
                        border
                >
                    <el-table-column
                            label="序号"
                            width="66px"
                            type="index">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="库名">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="类别">
                    </el-table-column>
                    <el-table-column
                            prop="function"
                            label="功能">
                    </el-table-column>

                    <el-table-column
                            prop="description"
                            label="描述"
                            width="600px">
                    </el-table-column>

                    <!--关键字列表-->
                    <el-table-column
                            label="关键字列表">
                        <template slot-scope="scope">
                            <el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>

                </el-table>
        </el-card>


    </div>
</template>

<script>
    export default {
        created() {
            this.getLibraryList();
        },
        name: "keywordLibrary",
        data() {
            return {
                libraryQuery: {
                    libraryName: '',
                    libraryType: '',
                    libraryFunction:''
                },
                libraryList:[]
            }
        },
        methods: {

            async getLibraryList(){
                const {data:res} = await this.$http.post('/library/getLibraryList',this.libraryQuery)
                this.libraryList = res.data;

            },
            checkDetail(val){

                window.open("http://localhost:8080/static/library/"+val.keywordlistpath+'.htm')

            }

        }

    }
</script>

<style scoped>
    .keywordLibraryContainer {
        height: 100%;
    }


    .queryForm{
        display: flex;
        justify-content: center;
    }
    .tableCard{
        height: 100%;
    }


</style>